<template>
	<scroll-view class="content">
		<!-- 地址 -->
		<view class="address">
			<view class="addressImage">
				<image src="https://z3.ax1x.com/2021/04/10/casxiT.png"></image>
			</view>
			<view class="addresslist">
				<view>
					<text class="name">{{addressInfo[0].addressContactName}}</text>
					<text class="call">{{addressInfo[0].addressContactTel}}</text>
				</view>
				<view>
					<view class="text">
						<text>{{addressInfo[0].addressDetail}}</text>
					</view>
					<view class="image">
						<navigator url="../mall-address/mall-address" open-type="navigate">
							<image src="https://z3.ax1x.com/2021/04/09/cUYpp6.png"></image>
						</navigator>
					</view>
					
				</view>
				<view>收货不便时，可选择暂存服务</view>
			</view>
		</view>
		<view class="goods">
			<view class="header">商品</view>
			<!-- 渲染订单数据 -->
			<view class="goodlistes">
				<view class="goodItem" v-for="item in goodlistes" :key="index">
					<navigator :url="'../productDetails/productDetails?productId='+item.productId " open-type="navigate">
						<view class="itemImage">
							<image :src="item.productImage"></image>
						</view>
						<view class="center">
							<view>{{item.productDetail}}</view>
							<view>
								<text class="text1">￥{{item.productSeckill}}</text>
								<text class="text2">×1</text>
							</view>
						</view>
					</navigator>
					
				</view>
			</view>
			<view class="distribution">
				<view class="one">
					<text>配送方式</text>
					<text>次日达</text>
					<text>现货，预计明天（3月4日）可送达</text>
				</view>
				<view class="two">
					<view>
						<text class="two1">运费险</text>
						<text class="two2">退换货可赔付10元</text>
					</view>
					<view>
						<text>￥0.34</text>
						<radio class="radio"></radio>
					</view>
					
				</view>
			</view>
		</view>
		<view class="purchase">
			<view class="top">
				<text>超值购</text>
				<text>超值专享价</text>
			</view>
			<view class="bottom">
				<view class="one">
					<image src="https://z3.ax1x.com/2021/04/10/caXpss.png"></image>
				</view>
				<view class="two">
					<text>小保养套餐</text>
					<view>
						<text class="red">￥388</text>
						<text class="grey">￥406</text>
					</view>
				</view>
				<view class="three">
					<image src="https://z3.ax1x.com/2021/04/09/cUYpp6.png"></image>
				</view>
			</view>
		</view>
		<view class="method">
			<view>
				<view class="pay">支付方式</view>
				<view class="money">
					<text>在线支付</text>
					<image src="https://z3.ax1x.com/2021/04/09/cUYpp6.png"></image>
				</view>
			</view>
			<view>
				<view class="pay">优惠卷</view>
				<view class="money">
					<text class="text">新人专享券</text>
					<text class="sub">-￥0</text>
					<image src="https://z3.ax1x.com/2021/04/09/cUYpp6.png"></image>
				</view>
			</view>
			<view>
				<view class="pay">活动优惠</view>
				<view class="money">
					<text class="sub">-￥{{goodlistes[0].productPrice-goodlistes[0].productSeckill}}</text>
				</view>
			</view>
			<view>
				<view class="pay">运费</view>
				<view class="money">
					<text>￥0</text>
				</view>
			</view>
			<view>
				<view class="pay">开发票</view>
				<view class="money">
					<text>本次无需开票</text>
					<image src="https://z3.ax1x.com/2021/04/09/cUYpp6.png"></image>
				</view>
			</view>
			<view>订单完成后，订单详情可开发票（部分除外）</view>
		</view>
		<view class="location">
			<view class="locationLeft">
				<text>合计</text>
				<text>￥</text>
				<text>{{goodlistes[0].productSeckill}}.00</text>
			</view>
			<view class="locationRight">
				<navigator @click="paygoodlist(goodlistes[0])" url="../mall-payment/mall-payment" open-type="navigate">
					 <text>提交订单</text>
				</navigator>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	// 状态机
	import {createNamespacedHelpers} from 'vuex'
	const {
		mapState,
		mapActions,
		mapMutations
	} = createNamespacedHelpers("mine")
	export default { 
		data() {
			return {
				goodlistes:[]
			}
		},
		onLoad(){
			//获取订单确认列表
			this.goodlistes=uni.getStorageSync("paylist")
			this.getAddressAll()
		},
		computed: {
			...mapState(["addressInfo"])
		
		},
		methods:{
			//获取默认地址
			...mapMutations(["setAddress"]),
			...mapActions(["getAddressAll"]),
			//添加到等待买家付款列表 提交订单
			paygoodlist(e){
				console.log(e);
				
				const val = uni.getStorageSync("paygoodlist")
				if (!val) {
					uni.setStorageSync("paygoodlist", [e])
				} else {
					const arr1 = val.some((item, index) => {
						return item.productId == e.productId
					})
					if (!arr1) {
						uni.setStorageSync("paygoodlist", [e, ...val])
					} else {
						const arr2 = val.map((item) => {
							if (item.productId == e.productId) {
								item.productCollectnum += 1
							}
							return item
						})
						uni.setStorageSync("shoppingCart", [...arr2])
					}
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: #f0f0f0;
		box-sizing: border-box;
		padding: 18rpx;
		margin-bottom:100rpx;
		/* 地址 */
		.address{
			width: 100%;
			background-color: #ffffff;
			border-radius: 20rpx;
			display: flex;
			margin-bottom: 24rpx;
			box-sizing: border-box;
			padding: 10rpx;
			.addressImage{
				width: 15%;
				// height: 200rpx;
				// background-color: #4CD964;
				display: flex;
				align-items: center;
				image{
					width: 95%;
					height: 90rpx;
				}
			}
			.addresslist{
				box-sizing: border-box;
				padding: 10rpx;
				width: 85%;
				view{
					&:nth-of-type(1){
						margin-bottom: 10rpx;
						.name{
							font-weight: bold;
							opacity: 0.8;
							font-size: 30rpx;
							margin-right: 20rpx;
						}
						.call{
							color: #555555;
							opacity: 0.8;
							font-size: 26rpx;
						}
						
					}
					&:nth-of-type(2){
						display: flex;
						margin-bottom: 10rpx;
						justify-content: space-between;
						.text{
							width: 80%;
							color: #555555;
							opacity: 0.8;
							font-size: 26rpx;
						}
						.image{
							width: 20%;
							display: flex;
							align-items: center;
							position: relative;
							image{
								position: absolute;
								right: 0rpx;
								width: 15rpx;
								height: 20rpx;
							}
						}
						
					}
					&:nth-of-type(3){
						color: #ffa411;
						font-size: 26rpx;
					}
				}
			}
		}
		//商品
		.goods{
			width: 100%;
			margin-bottom: 24rpx;
			// height: 100rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 20rpx;
			.header{
				width: 100%;
				height: 60rpx;
				opacity: 0.8;
				font-weight: bold;
			}
			.goodlistes{
				.goodItem{
					margin-bottom: 20rpx;
					navigator{
						display: flex;
						justify-content: space-between;
						.itemImage{
							width: 20%;
							image{
								width: 120rpx;
								height: 120rpx;            
							}
							
						}
						.center{
							width: 80%;
							padding-left: 24rpx;
							view{
								&:nth-of-type(1){
									color: #333333;
									font-size: 28rpx;
									opacity: 0.8;
									height: 60%;
									overflow: hidden;
									-webkit-line-clamp: 2;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-box-orient: vertical;
								}
								&:nth-of-type(2){
									float: right;
									.text1{
										font-weight: bold;
										font-size: 28rpx;
										opacity: 0.8;
										margin-right: 10rpx;
									}
									.text2{
										color: #555555;
										font-size: 28rpx;
									}
									
								}
							}
						}
					}
					
				}
				
			}
			.distribution{
				margin-top: 25rpx;
				.one{
					text{
						&:nth-of-type(1){
							margin-right: 15rpx;
							font-size: 28rpx;
							opacity: 0.8;
							font-weight: bold;
						}
						&:nth-of-type(2){
							display: inline-block;
							margin-right: 10rpx;
							width: 90rpx;
							height: 40rpx;
							text-align: center;
							line-height: 40rpx;
							border-radius: 20rpx;
							border: 2rpx solid #0bb2ff;
							background-color: #effffe;
							color:  #0bb2ff;
							font-size: 20rpx;
							font-weight: bold;
						}
						&:nth-of-type(3){
							font-size: 24rpx;
							opacity: 0.6;
							color: #555555;
						}
					}
				}
				.two{
					margin-top: 10rpx;
					display: flex;
					justify-content: space-between;
					view{
						&:nth-of-type(1){
							.two1{
								font-size: 28rpx;
								opacity: 0.8;
								font-weight: bold;
								margin-right: 40rpx;
							}
							.two2{
								font-size: 24rpx;
								opacity: 0.6;
								color: #555555;
							}
							
						}
						&:nth-of-type(2){
							text{
								font-size: 24rpx;
								color: #555555;
							}
							.radio{
								margin-right: -12rpx;
								color:#330824;
								transform: scale(0.5);
							}
						}
					}
				}
			}
		}
		//超值购
		.purchase{
			width: 100%;
			margin-bottom: 24rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 20rpx;
			.top{
				text{
					&:nth-of-type(1){
						font-size: 28rpx;
						opacity: 0.8;
						font-weight: bold;
						margin-right: 20rpx;
					}
					&:nth-of-type(2){
						font-size: 24rpx;
						opacity: 0.6;
						color: #555555;
					}
				}
			}
			.bottom{
				margin-top: 20rpx;
				width: 55%;
				height: 140rpx;
				display: flex;
				border-radius: 10rpx;
				-moz-box-shadow:0 0 10px #efefef;
				-webkit-box-shadow:0 0 10px  #efefef;
				box-shadow:0 0 10px  #efefef;
				background-repeat: no-repeat;
				background-image:url(https://z3.ax1x.com/2021/04/10/caLL34.png);
				.one{
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding: 12rpx;
					height: 100%;
					margin-left: 20rpx;
					image{
						width: 80rpx;
						height: 80rpx;
					}
				}
				.two{
					// border: 1rpx solid red;
					box-sizing: border-box;
					padding: 24rpx;
					text{
						font-size: 24rpx;
						opacity: 0.6;
						color: #555555;
					}
					view{
						.red{
							font-weight: bold;
							color: #ff5500;
							opacity: 0.8;
						}
						.grey{
							font-size: 20rpx;
							text-decoration: line-through;
						}
					}
				}
				.three{
					padding-left:20rpx;
					width: 20%;
					display: flex;
					align-items: center;
					position: relative;
					image{
						padding-right: 10rpx;
						position: absolute;
						right: 0rpx;
						width: 15rpx;
						height: 20rpx;
					}
				}
			}
			
		}
		//支付方式
		.method{
			width: 100%;
			margin-bottom: 24rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 20rpx;
			view{
				&:nth-of-type(1){
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					.pay{
						font-size: 28rpx;
						opacity: 0.8;
						font-weight: bold;
						margin-right: 20rpx; 
					}
					.money{
						display: flex;
						align-items: center;
						text{
							font-size: 24rpx;
							margin-right: 20rpx;
						}
						image{
							right: 0rpx;
							width: 15rpx;
							height: 20rpx;
						}
					}
				}
				&:nth-of-type(2){
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					.pay{
						font-size: 28rpx;
						opacity: 0.8;
						font-weight: bold;
						margin-right: 20rpx; 
					}
					.money{
						display: flex;
						align-items: center;
						.text{
							font-size: 24rpx;
						}
						.sub{
							font-weight: bold;
							color: #ff5500;
							opacity: 0.8;
							font-size: 24rpx;
							margin-left: 10rpx;
							margin-right: 20rpx;
						}
						image{
							right: 0rpx;
							width: 15rpx;
							height: 20rpx;
						}
					}
				}
				&:nth-of-type(3){
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					.pay{
						font-size: 28rpx;
						opacity: 0.8;
						font-weight: bold;
						margin-right: 20rpx; 
					}
					.money{
						display: flex;
						align-items: center;
						.sub{
							font-weight: bold;
							color: #ff5500;
							opacity: 0.8;
							font-size: 24rpx;
							margin-left: 10rpx;
							margin-right: 20rpx;
						}
						image{
							right: 0rpx;
							width: 15rpx;
							height: 20rpx;
						}
					}
				}
				&:nth-of-type(4){
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					.pay{
						font-size: 28rpx;
						opacity: 0.8;
						font-weight: bold;
						margin-right: 20rpx; 
					}
					.money{
						display: flex;
						align-items: center;
						text{
							font-weight: bold;
							font-size: 24rpx;
							margin-right: 20rpx;
						}
						
					}
				}
				&:nth-of-type(5){
					display: flex;
					justify-content: space-between;
					.pay{
						font-size: 28rpx;
						opacity: 0.8;
						font-weight: bold;
						margin-right: 20rpx; 
					}
					.money{
						display: flex;
						align-items: center;
						text{
							font-size: 24rpx;
							margin-right: 20rpx;
						}
						image{
							right: 0rpx;
							width: 15rpx;
							height: 20rpx;
						}
					}
				}
				&:nth-of-type(6){
					margin-bottom: 20rpx;
					font-size: 24rpx;
					opacity: 0.6;
					color: #555555;
					
				}
			}
			
		}
		.location{
			width: 100%;
			background-color: #ffffff;
			position: fixed;
			border-radius: 25rpx;
			bottom: 0rpx;
			left: 0rpx;
			display: flex;
			justify-content: space-between;
			.locationLeft{
				padding: 24rpx;
				box-sizing: border-box;
				text{
					&:nth-of-type(1){
						font-size: 28rpx;
						font-weight: 600;
						margin-right: 20rpx;
						
					}
					&:nth-of-type(2){
						font-size: 16rpx;
						color: #ff6334;
						
						
					}
					&:nth-of-type(3){
						font-size: 28rpx;
						color:  #ff6334;
						font-weight: 600;
					}
				}
			}
			.locationRight{
				margin-right: 20rpx;
				width: 25%;
				height: 60rpx;
				margin-top: 15rpx;
				font-size: 28rpx;
				align-items: center;
				text-align: center;
				line-height: 60rpx;
				background-color: #ff6334;
				border-radius: 30rpx;
				text{
					color: #FFFFFF;
					opacity: 0.8;
				}
			}
			
		}
	}
</style>
